<template>
  <div class="home-pane">
    <div class="home-head">
      <h2>TRIANGLE-ELEMENT-UI</h2>
      <p>基于ElementUI的管理系统开发业务组件库</p>
      <button>快速上手</button>
    </div>
    <div class="home-intro">
      <ul>
        <li>
          <h4>高效开发</h4>
          <p>
            数据驱动视图，减少页面结构代码；常用功能封装，减少业务代码。
          </p>
        </li>
        <li>
          <h4>简单易懂</h4>
          <p>
            直接修改数据配置，即可显示页面；视图配置数据与动态加载数据分离，动态合成展示数据，减少数据处理操作。
          </p>
        </li>
        <li>
          <h4>易上手</h4>
          <p>
            直接修改数据配置，即可显示页面；视图配置数据与动态加载数据分离，动态合成展示数据，减少数据处理操作。
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    // 加载数据
    getData() {}
  }
};
</script>

<style lang="scss" scoped>
.home {
  &-pane {
    margin: 0 auto;
    padding: 80px 0;
    max-width: 1200px;
  }

  &-head {
    width: 100%;
    text-align: center;

    h2 {
      font-size: 24px;
    }

    p {
      color: #969696;
      font-size: 14px;
      line-height: 1.74;
    }
  }
}
</style>

